<template>
    <div class="finance-info-table">
        <div class="finance-info-table-header">{{ form.year }}年财报</div>
        <div class="finance-info-table-title">
            <div class="label">申报状态</div>
            <div class="value" :style="`color:${ form.status == 0 ? 'red' : 'blue'}`">{{ form.status == 1 ? '已申报' : '未申报'  }}</div>
        </div>
        <el-descriptions border column="4">
            <el-descriptions-item label-class-name="descriptions-label" v-for="(v, i) in list" :key="i" :label="v.label">
                <span :style="`color:${form[v.prop]?.isRed && 'red'}`">
                    {{ v.func ? v.func(form[v.prop]) : (form[v.prop]?.value + v.unit)   }}
                </span>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script setup>
const props = defineProps({
    list: { type: Array, default: [] },
    form: { type: Object, default: {} }
})
</script>

<style lang="scss" scoped>
:deep(.el-descriptions .el-descriptions__label) {
    width: 100px !important;
}
.finance-info-table-header{
    margin-top: 20px;
    text-align: center;
    line-height: 44px;
    background-color: #ebeef5;
}
.finance-info-table-title {
    display: flex;
    border: 1px solid #ebeef5;
    border-bottom: none;
    &>div {
        width: 50%;
        line-height: 44px;
        text-align: center;
        
    }
    .label{
        border-right: 1px solid #ebeef5;
    }
}
</style>